<template>
	<view>
		<view class="gl-header">
			<view class="gl-header-left">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="getSearch"></uni-search-bar>
			</view>
			<view class="gl-header-right">
				<view class="gl-button gl-button-success" hover-class="button-base-hover" :hover-stay-time="100"
					@click="addnew">
					<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">新增</text>
				</view>
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
			</view>
		</view>
		<view class="gl-body table-container" :style="{height:sch+'px'}">
			<uni-table stripe type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center">ID</uni-th>
					<uni-th>标题</uni-th>
					<uni-th>团购价(元)</uni-th>
					<uni-th align="center">结算价(元)</uni-th>
					<uni-th>开团人数</uni-th>
					<uni-th>爆团人数</uni-th>
					<uni-th align="center">参团人数</uni-th>
					<uni-th align="center">状态</uni-th>
					<uni-th align="center">进行中</uni-th>
					<uni-th align="center">排序</uni-th>
					<uni-th>开始时间</uni-th>
					<uni-th>结束时间</uni-th>
					<uni-th></uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in isoatList" :key="'item'+index">
					<uni-td align="center">{{item.id}}</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 5px;flex-direction: column;"
							@click="showImage(item)">
							<image :src="sConf.cos + (item.cover || '/media/default/cover.png')" mode="widthFix"
								style="width: 128px;height: 72px;"></image>
							<text>{{item.title}}</text>
						</view>
					</uni-td>
					<uni-td><uni-number-box :value="(item.aprice / 100).toFixed(2) ?? 0" :min="0.01" :step="0.01"
							:max="9999" :width="60" @change="event => {changeAprice(event, item.id)}" />
					</uni-td>
					<uni-td align="center"><text style="color:#f0ad4e;">{{(item.bprice / 100).toFixed(2) ?? 0}}</text>
					</uni-td>
					<uni-td><uni-number-box :value="item.minth" :min="1"
							@change="event => {changeMinth(event, item.id)}" /></uni-td>
					<uni-td><uni-number-box :value="item.maxth" :min="0"
							@change="event => {changeMaxth(event, item.id)}" /></uni-td>
					<uni-td align="center"> <text style="color:#dd524d;">{{item.sub_join.length}}</text> </uni-td>
					<uni-td align="center"> <text
							:style="{color:item.sub_run?'#4cd964':'#dd524d'}">{{item.sub_run}}</text> </uni-td>
					<uni-td align="center">
						<switch :checked="item.status === 1" style="transform:scale(0.5)"
							@change="event => changeState(event, item.id)" />
					</uni-td>
					<uni-td> <uni-number-box :value="item.hot" :min="0"
							@change="event => {changeHot(event, item.id)}" /></uni-td>
					<uni-td>{{item.starttime}}</uni-td>
					<uni-td>{{item.outtime}}</uni-td>
					<uni-td>
						<view style="display: flex;gap: 5px;">
							<text class="gl-link gl-link-base" @click="showImage(item)">编辑</text>
							<text class="gl-link gl-link-error" @click="remove(item)">移除</text>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>


		<popTuanViewVue ref="popTuanView" @change="refresh"></popTuanViewVue>

		<!--
		<popProductSelectVue ref="popProductSelect" desc="搜索商品" @change="addIsoSync"></popProductSelectVue>
		<popProductImageVue ref="popProductImage" @reload="refresh"></popProductImageVue>
		-->
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import popTuanViewVue from './pop-tuan-view.vue';

	export default {
		data() {
			return {
				sch: 0,
				title: '悦玺团购',
				sConf: getApp().globalData,
				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				search: '',
				isoatList: []
			}
		},
		mounted() {
			this.designLayout()
			this.refresh()
		},
		components: {
			popTuanViewVue
		},
		methods: {
			changeState(n, e) {
				console.log('changeState', e, n);
				let data = {
					status: n.detail.value ? 1 : 0
				}
				this.patchTuan(e, data)
			},
			changeAprice(n, e) {
				console.log('changeHot', e, n);
				let data = {
					aprice: n * 100
				}
				this.patchTuan(e, data)
			},
			changeMinth(n, e) {
				console.log('changeHot', e, n);
				let data = {
					minth: n
				}
				this.patchTuan(e, data)
			},
			changeMaxth(n, e) {
				console.log('changeHot', e, n);
				let data = {
					maxth: n
				}
				this.patchTuan(e, data)
			},
			changeHot(n, e) {
				console.log('changeHot', e, n);
				let data = {
					hot: n
				}
				this.patchTuan(e, data)
			},
			patchTuan(e, data) {
				let tk = this.sConf.auth.token ?? ''
				psMethod.syncAuthenticatorRequest(`/admin/tuanList/${e}/`, 'PATCH', tk, data).then(res => {
					console.log('change');
					this.refresh()
				}).catch(err => {
					console.log('err---->', err);
				})
			},
			remove(e) {
				let that = this
				uni.showModal({
					title: '移除严选',
					content: '是否要移除该产品',
					success(r) {
						if (r.confirm) {
							let token = that.sConf.auth.token ?? ''
							psMethod.syncAuthenticatorRequest(`/admin/tuanList/${e.id}/`, 'DELETE', token).then(
								res => {
									console.log('创建严选', res);
									that.refresh()
								})
						}
					}
				})
			},

			addIsoSync(e) {
				console.log('addIsoSync', e);
				let that = this
				uni.showModal({
					title: '创建严选',
					content: '是否要加入严选列表',
					success(r) {
						if (r.confirm) {
							let token = that.sConf.auth.token ?? ''
							let data = {
								spu: e
							}
							psMethod.syncAuthenticatorRequest('/admin/tuanList/', 'POST', token, data).then(
								res => {
									console.log('创建严选', res);
									that.refresh()
								}).catch(err => {
								uni.showToast({
									title: '创建失败'
								})
							})

						}
					}
				})
			},
			addnew() {
				this.$refs.popTuanView.open()
			},
			showImage(e) {
				this.$refs.popTuanView.open(e)
			},
			refresh() {
				let token = this.sConf.auth.token ?? ''
				let data = {
					page: this.page,
					ordering: '-hot'
				}
				psMethod.syncAuthenticatorRequest('/admin/tuanList/', 'GET', token, data).then(res => {
					console.log('加载商品列表', res);
					if (this.page > 1) {
						let tmpData = this.isoatList.concat(res.resmsg)
						this.isoatList = tmpData
					} else {
						this.isoatList = res.resmsg
						this.count = res.count
						this.size = res.size
					}
				}).catch(err => {
					if (err.rescode === 404 && this.page > 1) {
						this.page -= 1
					}
				})
			},
			getSearch(e) {

			},
			designLayout() {
				this.$nextTick(() => {
					let window = uni.getWindowInfo();
					let wh = window.windowHeight;
					let query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.sch = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>